import React, { useState, useEffect } from 'react'
import { useAuth, useSubscription } from '../contexts/AuthProvider'
import { EmptyState } from '../components/ui/EmptyState'
import { LoadingSpinner } from '../components/ui/LoadingSpinner'
import { Button } from '../components/ui/Button'
import { Badge } from '../components/ui/Badge'
import { BookOpen, Search, Grid, List, Filter } from 'lucide-react'

export function Library() {
  const { userProfile } = useAuth()
  const { subscription } = useSubscription()
  const [papers, setPapers] = useState([])
  const [loading, setLoading] = useState(true)
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('list')

  useEffect(() => {
    // Load bookmarked papers
    const loadLibrary = async () => {
      setLoading(true)
      try {
        // This would be an API call
        await new Promise(resolve => setTimeout(resolve, 1000))
        setPapers([]) // Empty for now
      } finally {
        setLoading(false)
      }
    }
    
    loadLibrary()
  }, [])

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <LoadingSpinner size="lg" />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">My Library</h1>
          <p className="text-gray-600">
            Your saved papers and bookmarks
          </p>
        </div>
        
        {/* Usage info */}
        {userProfile?.subscription_status === 'free' && (
          <div className="flex items-center space-x-2">
            <Badge variant="outline">
              {subscription?.usage_metrics?.saved_papers_count || 0} / {subscription?.features?.max_saved_papers || 10} papers
            </Badge>
          </div>
        )}
      </div>

      {/* Controls */}
      <div className="bg-white rounded-lg border border-gray-200 p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Button variant="ghost" size="sm">
              <Filter className="h-4 w-4 mr-2" />
              All Papers
            </Button>
          </div>
          
          <div className="flex items-center border border-gray-300 rounded-md">
            <Button
              variant={viewMode === 'list' ? 'default' : 'ghost'}
              size="sm"
              onClick={() => setViewMode('list')}
              className="rounded-r-none"
            >
              <List className="h-4 w-4" />
            </Button>
            <Button
              variant={viewMode === 'grid' ? 'default' : 'ghost'}
              size="sm"
              onClick={() => setViewMode('grid')}
              className="rounded-l-none border-l border-gray-300"
            >
              <Grid className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>

      {/* Empty state */}
      {papers.length === 0 && (
        <EmptyState
          icon={<BookOpen className="h-12 w-12 text-gray-400" />}
          title="No saved papers yet"
          description="Start building your personal research library by bookmarking papers you find interesting."
          action={
            <Button onClick={() => window.location.href = '/app/browse'}>
              <Search className="h-4 w-4 mr-2" />
              Browse Papers
            </Button>
          }
        />
      )}
    </div>
  )
}